<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
<script type="text/javascript" src="${ctx }/js/jquery-ui-1.8.17.custom.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/pmgr/css/jquery/i18n/jquery.ui.datepicker-ko.js"></script>
<link rel="stylesheet" href="/pmgr/css/jquery/themes/ui-lightness/jquery.ui.all.css">


<script type="text/javascript">
var tooltipLeftMargin=20;
var tooltipTopMargin=0;

$(document).ready(function(){
	$( "#reservation_dt" ).datepicker({
			dateFormat: 'yy-mm-dd',
	 		changeMonth: true,
	 		changeYear: true,
	 		showOn: 'button',
	 		buttonImageOnly: true,
	 		buttonImage: "/pmgr/images/icon_calendar.gif"
	 	}).change(function(){changeDate();});

	$(".trRooms").mouseover(function (){
		$(this).addClass("over");
	}).mouseout(function (){
		$(this).removeClass("over");
	});
	
	$(".sCalendar").each(function (){
		$(this).click(function (){
			var rDate =Number($(this).attr("rDate"));
			var nDt = new Date();
			if(Number(nDt.toString("yyyyMMdd")) > rDate){
				alert("오늘 이전자료는 선택할수 없습니다.");
				return false;
			}
			
			location.href="./petc1003Q.do?p_id=${param.p_id}&reservation_dt="+$(this).attr("rDate")+"&pg_no=${param.pg_no}";
		});
	});
	$(".liPop > a").mouseover(function (evt){
		$("#p_nm").html($(this).attr("room_nm"));
// 		$("#p_status").html($(this).attr("busy_type_nm"));
		
		$("#site_nm").html("사이트 : "+$(this).attr("site_form"));
		$("#site_size").html("크기 : "+$(this).attr("site_size"));
		
// 		<td colspan="2" id="site_nm">사이트 : 잔듸</td>
// 			<td colspan="2" id="site_size">크기 : 가로 8m, 세로 10m</td>
// 			<td colspan="2" id="use_pay">이용금액 : 40000원</td>
// 			<td colspan="2" id="site_status">상태 : 예약가능 (2박예약)</td>
		
		var rm_status = $(this).attr("rm_status");
		if("R"==rm_status){
			$("#site_status").html("상태 : 예약대기");
		}else if("C"==rm_status){
			$("#site_status").html("상태 : 예약불가");
		}else{
			$("#site_status").html("상태 : 예약가능");
		}
		$("#p_pay").html("이용금액 : "+$.comma($(this).attr("pm_pay"))+"원");
		$("#p_status").html("["+$(this).attr("busy_type_nm")+"]");
		

		var scrollT =0;
		if(jQuery.browser.msie){
			scrollT = $("html").scrollTop();
		}else{
			scrollT = $("body").scrollTop();
		}
		
		$("#divPop").css("left",evt.clientX+20);
		$("#divPop").css("top",(evt.clientY+scrollT));
		if((evt.clientY+scrollT+$("#divPop").height()) > $("body").height()){
			$("#divPop").css("top",(evt.clientY+scrollT-$("#divPop").height()));
		}
		
		var chkWidth = tooltipLeftMargin+window.event.x;
		if((chkWidth+$("#divPop").width()) >$("html").width()){
			$("#divPop").css("left",(chkWidth - $("#divPop").width() -30) +"px");
		}else{
			$("#divPop").css("left",(chkWidth) +"px");
		}
		
		$("#divPop").show();
	}).mouseout(function (){
		$("#divPop").hide();
	});
// 	 class='liPop'
});

function goNextMonth(nextNum){
	
// 	2013년 05월
	var nDt = new Date();
	nDt.set({year:${fn:substring(reservation_dt,0,4)},month:(Number(${fn:substring(reservation_dt,4,6)})-1),day:Number(${fn:substring(reservation_dt,6,8)})});
	nDt.addMonths(nextNum);
	location.href="./petc1003Q.do?p_id=${param.p_id}&reservation_dt="+nDt.toString("yyyyMMdd")+"&pg_no=${param.pg_no}";
}
</script>
			<p>해달 날짜, 사이트명에 마우스를 올리면 상세 설명을 볼수 있습니다</p>
			<p><img src="/camping/img/icon_green.jpg" /> 예약가능, <img src="/camping/img/icon_blue.jpg" /> 예약진행중, <img src="/camping/img/icon_red.jpg" /> 예약완료</p>
			<table style="width: 100%">
				<tr>
					<td colspan="7" style="text-align: center;">
						<div>
							<a href="#" onclick="goNextMonth(-1);" ><img alt="" src="/camping/img/calendar_arrow_l.jpg"  style="vertical-align:top; padding-top: 20px;padding-right: 10px;"></a>
							<strong style="font-size: 36px;font-weight: bold;font-family: Arial Black">${fn:substring(reservation_dt,0,4)}년 ${fn:substring(reservation_dt,4,6)}월</strong>
							<a href="#" onclick="goNextMonth(1);"><img alt="" src="/camping/img/calendar_arrow_r.jpg" style="vertical-align:top; padding-top: 20px;padding-left : 10px;"></a>
						</div>
						<div style="padding-left: 0px;float: right;"><strong style="color: #ff9f52; ">TODAY : ${nDtAll }</strong></div>
						
						
					</td>
				</tr>
			</table>
			<table class="cal1">
				<tr>
					<th class="calRed" style="width:10%">일요일</th>
					<th class="calBlack" style="width:10%">월요일</th>
					<th class="calBlack" style="width:10%">화요일</th>
					<th class="calBlack" style="width:10%">수요일</th>
					<th class="calBlack" style="width:10%">목요일</th>
					<th class="calBlack" style="width:10%">금요일</th>
					<th class="calBlue" style="width:10%">토요일</th>
				</tr>
				${txtCal }
			</table>
<div id="divPop" style="display:none; width:220px;position: absolute;left: 20px;top:10px; ">
	<div class="calJuganBack">
		<table class="calPop">
			<tr height="10">
				<td ><b id="p_nm">비앙카1</b></td>
				<td  style="text-align: right;"><b id="p_status">[비수기주중]</b></td>
			</tr>
		</table>
	</div>
	<div style="background-color: white;">
		<table class="calPopBum">
			<tr>
				<td colspan="2" id="site_nm">사이트 : 잔듸</td>
			</tr>
			<tr>
				<td colspan="2" id="site_size">크기 : 가로 8m, 세로 10m</td>
			</tr>
			<tr>
				<td colspan="2" id="p_pay">이용금액 : 40000원</td>
			</tr>
			<tr>
				<td colspan="2" id="site_status">상태 : 예약가능 (2박예약)</td>
			</tr>
		</table>
	</div>
</div>